<template>
  <div class="tzyl">
    <router-link class="nav-btn" to="/home"></router-link>
    <div class="tzyl-head">
          <div class="sub-head1 animated rollIn">&nbsp;</div>
          <div class="sub-head2-wrap animated height1 delay-2 ">
            <div class="tzyl-head2">&nbsp;</div> 
          </div>
          <div class="tzyl-head3 animated bounceIn delay-4">&nbsp;</div> 
          <div class="sub-head4 animated fadeIn delay-5">
              <ul class="waves">
                <li class="li1"><span class="ani-li"></span></li>
                <li class="li2"><span class="ani-li"></span></li>
                <li class="li3"><span class="ani-li"></span></li>
              </ul>
          </div> 
           <div class="sub-head5 animated fadeIn delay-5">
              <ul class="waves waves1">
                <li class="li1"><span class="ani-li"></span></li>
                <li class="li2"><span class="ani-li"></span></li>
                <li class="li3"><span class="ani-li"></span></li>
              </ul>
          </div> 
          <div class="tzyl-head6 animated">&nbsp;</div>
          <div class="tzyl-head7 animated" :class="{'game':isbtn}">&nbsp;</div>
    </div>
    <div class="content">
        <img src="" alt="" v-lazy="tzylimg1">
        <img src="" alt="" v-lazy="tzylimg2">
        <img src="" alt="" v-lazy="tzylimg3">
        <img src="" alt="" v-lazy="tzylimg4">
        <img src="" alt="" v-lazy="tzylimg5">
        <img src="" alt="" v-lazy="tzylimg6">
        <img src="" alt="" v-lazy="tzylimg7">
        <img src="" alt="" v-lazy="tzylimg8">
        <div class="tzyl-bg">
          <div class="tab2">
            <table cellpadding="0" cellspacing="0">
              <tr>
                <td class="first">区域划分</td>
                <td class="first">三线城市</td>
                <td class="first">二线城市</td>
                <td class="first">一线城市</td>
              </tr>
              <tr>
                <td class="first">区域代理费</td>
                <td>{{money.quyuMoney[0]}}</td>
                <td>{{money.quyuMoney[1]}}</td>
                <td>{{money.quyuMoney[2]}}</td>
              </tr>
              <tr>
                <td class="first">年度营运服务费</td>
                <td>{{money.quyuYunying[0]}}</td>
                <td>{{money.quyuYunying[1]}}</td>
                <td>{{money.quyuYunying[2]}}</td>
              </tr>
            </table>

          </div>

        </div>
        <img src="" alt="" v-lazy="tzylimg9">
        <img src="" alt="" v-lazy="tzylimg10">
        <div class="tzyl-bg">
        <div class="tab2">
          <table>
            <tr>
              <td class="first">店铺类型</td>
              <td class="first">投资费用</td>
              <td class="first">年度营运服务费</td>
            </tr>
            <tr>
              <td>基础店</td>
              <td>{{money.dianMoney[0]}}</td>
              <td>{{money.dianYunying[0]}}</td>
            </tr>
            <tr>
              <td>旗舰店</td>
              <td>{{money.dianMoney[1]}}</td>
              <td>{{money.dianYunying[1]}}</td>
            </tr>
          </table>

        </div>

      </div>
        <img src="" alt="" v-lazy="tzylimg11">
        <img src="" alt="" v-lazy="tzylimg12">
        <img src="" alt="" v-lazy="tzylimg13">
        <img src="" alt="" v-lazy="tzylimg14">
        <img src="" alt="" v-lazy="tzylimg15">
    </div>
    
    
    <div class="next-bg">
          <div class="next-3 animated fadeIn "></div>
          <div class="next-4 animated fadeIn "></div>
          <div class="next-5 animated fadeIn "></div>
         <router-link to="/fwbz" class="next-img-wrap">
            <img src="../assets/images/next-1.png" class="next-img" alt="">
         </router-link>
    </div>
    

  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'tzyl',
  data () {
    return {
        money: {
          "dianMoney": [],
          "dianYunying": [],
          "quyuMoney": [],
          "quyuYunying": []
        },
        isbtn:true,
        "tzylimg1" : require('@/assets/images/tzyl-img1.jpg'),
        "tzylimg2" : require('@/assets/images/tzyl-img2.jpg'),
        "tzylimg3" : require('@/assets/images/tzyl-img3.jpg'),
        "tzylimg4" : require('@/assets/images/tzyl-img4.jpg'),
        "tzylimg5" : require('@/assets/images/tzyl-img5.jpg'),
        "tzylimg6" : require('@/assets/images/tzyl-img6.jpg'),
        "tzylimg7" : require('@/assets/images/tzyl-img7.jpg'),
        "tzylimg8" : require('@/assets/images/tzyl-img8.jpg'),
        "tzylimg9" : require('@/assets/images/tzyl-img9.jpg'),
        "tzylimg10" : require('@/assets/images/tzyl-img10.jpg'),
        "tzylimg11" : require('@/assets/images/tzyl-img11.jpg'),
        "tzylimg12" : require('@/assets/images/tzyl-img12.jpg'),
        "tzylimg13" : require('@/assets/images/tzyl-img13.jpg'),
        "tzylimg14" : require('@/assets/images/tzyl-img14.jpg'),
        "tzylimg15" : require('@/assets/images/tzyl-img15.jpg'),
    }
  },
  mounted: function(){
    let self = this;
    let time = (new Date()).valueOf();
    axios.get(`./data/data.js?t=${time}`)
    .then(function(res){
      self.money = res.data;
    });
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tzyl{width:100%;overflow: hidden;}
.content img{display: block;width:100%;}

.game{
  -webkit-animation:game 1s ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count:infinite;
  animation:game 1s ease;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;
}
@-webkit-keyframes game {
 0%{-webkit-transform: translateX(0) translateY(0);opacity: 0}
 10%{-webkit-transform: translateX(0) translateY(0);opacity: 1}
 50%{opacity: 1}
 100%{-webkit-transform: translateX(-10rem) translateY(-12rem);opacity: 0}
}
@keyframes game {
  0%{transform: translateX(0) translateY(0);opacity: 0}
  10%{transform: translateX(0) translateY(0);opacity: 1}
  50%{opacity: 1}
 100%{transform: translateX(-10rem) translateY(-12rem);opacity: 0}
}

.tzyl-head{width: 100%;height: 31.3rem;background: url(../assets/images/tzyl-banner.jpg) no-repeat;background-size: 100% 100%}
.sub-head2-wrap{position: absolute;left: 8.25rem;top: 6.35rem;width: 1.475rem;}
.tzyl-head2{width: 1.475rem;height: 4.475rem;background: url(../assets/images/tzyl-head2.png) no-repeat;background-size: 100% 100%;}
.tzyl-head3{position: absolute;left: 4.625rem;top: 5.075rem;width: 9.325rem;height: 13.775rem;background: url(../assets/images/tzyl-head3.png) no-repeat;background-size: 100% 100%;}
.sub-head4{top: 14.425rem;left: 2.6rem;}
.sub-head5{left: 13.4rem;top: 14.425rem;}
.tzyl-head6{position: absolute;left: 7.9rem;top: 15.4rem;width: 9.6rem;height: 15.325rem;background: url(../assets/images/banner-tzyl.gif) no-repeat;background-size: 100% 100%;}
.tzyl-head7{position: absolute;left: 12.1rem;top: 16.625rem;width: 2.375rem;height: 2.775rem;background: url(../assets/images/tzyl-head7.png) no-repeat;background-size: 100% 100%}

.tzyl-bg{position: relative;width:100%;background: #ffffff;}
.tab2{width:16.6rem;margin:0 auto;padding: 0.2rem 0}
.tab2 table{width: 100%;border-collapse:collapse;}
.tab2 table tr td{ padding:0.2rem 0.1rem;font-size:.6rem;line-height:0.6rem;color:#000;border:2px solid #000;}
.tab2 table tr .first{background: #b01f24;color: #fff}
</style>
